<template>
  <div>
    <div class="legend-row">
      <div class="row"><span class="marlf0">隐患类型</span></div>
      <div class="row" title="网格"><img src="../../../assets/map/layerIcon/QL.png" alt=""><span>正常桥梁</span></div>
      <div class="row" title="网格"><img src="../../../assets/map/layerIcon/QL_1.png" alt=""><span>半堵桥梁</span></div>
      <div class="row" title="网格"><img src="../../../assets/map/layerIcon/QL_2.png" alt=""><span>全堵桥梁</span></div>
    </div>
    <div class="legend-row">
      <div class="row"><span>淹没深度:</span></div>
      <div class="row" title="村庄"><div class="circle" style="background: #E22222" /><span>大于2米</span></div>
      <div class="row" title="村庄"><div class="circle" style="background: #FF8D0C" /><span>1-2米</span></div>
      <div class="row" title="村庄"><div class="circle" style="background: #F0C90B" /><span>0.5-1米</span></div>
      <div class="row" title="村庄"><div class="circle" style="background: #00B2FF" /><span>小于0.5米</span></div>
    </div>
    <div class="legend-row">
      <div class="row"><span>风险等级:</span></div>
      <div class="row" title="村庄">
        <div class="circle" style="background: #E22222" />
        <span>极危险</span></div>
      <div class="row" title="村庄">
        <div class="circle" style="background: #FF8D0C" />
        <span>危险</span></div>
      <div class="row" title="村庄">
        <div class="circle" style="background: #F0C90B" />
        <span>警戒</span></div>
      <div class="row" title="村庄">
        <div class="circle" style="background: #00B2FF" />
        <span>关注</span></div>
    </div>
  </div>
</template>

<style scoped lang="less">
@import "legend";
</style>
